"use client"

import {SunMoon,Moon} from "lucide-react"
import {useTheme} from "next-themes";
import { Button } from '@nextui-org/button';
import { useEffect, useState } from "react";

export function ThemeSwitcher() {
  const [mounted, setMounted] = useState(false)
  const { theme, setTheme } = useTheme()

  useEffect(() => {
    setMounted(true)
  }, [])

  if(!mounted) return null

  return (
    <div>
      <Button isIconOnly color="warning" variant="faded" aria-label="theme" onClick={() => setTheme(theme === 'light' ? 'dark':'light')}>
        {theme === 'light' ? <SunMoon size={30}></SunMoon> : <Moon size={30}></Moon>}
      </Button>
    </div>
  )
};